<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <img src="../assets/images/fareCode.png" alt="" onclick="return false">
 
                    <img :src="siteImageUrl+gift_img" alt="" class="shopTitle" onclick="return false">

        <div id="erweima"></div>
  
        
    </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
    name: "giftQRCode",
    data() {
        return {
            gift_img: ""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_Code";
    },
    mounted: function() {
        var erweima = document.getElementById("erweima");
        // 设置参数方式
        var qrcode = new QRCode("erweima", {
            text: `${this.$route.params.id}`,
            width: "190",
            height: "190",
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

        this.gift_img = localStorage.getItem("gift_img");
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
    position: relative;
}
.con img {
    width: 100%;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}
.con .shopTitle {
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 50%;
}
.con .fare30 {
    position: absolute;
    left: 2%;
    top: 30%;
}
.con .fare65 {
    position: absolute;
    left: 3%;
    top: 64%;
}

#erweima {
    position: absolute;
    width: 190px;
    height: 190px;
    left: 50%;
    transform: translate(-52%, -32%);
    top: 52%;
}

.con .title {
    position: absolute;
    left: 50%;
    width: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
}
</style>
